<!--  -->
<template>
  <div class=''>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="关联房产编号："
          prop="projectId"
        >
          <el-select
            filterable
            style="width:100%"
            v-model="ruleForm.projectId"
            :disabled="method=='edit'"
            placeholder="请选择关联房产编号"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item
          label="面积(㎡)"
          prop="projectArea"
        >
          <el-input
            v-model="ruleForm.projectArea"
            placeholder="请输入面积"
            @input.native="ruleForm.projectArea = test(ruleForm.projectArea)"
          ></el-input>
        </el-form-item> -->
<!--        <el-form-item label="水表名称：">-->
<!--          <el-input-->
<!--            v-model="ruleForm.meterWaterName"-->
<!--            placeholder="请输入水表名称"-->
<!--          ></el-input>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button @click="addForm">添加表名称</el-button>
        </el-form-item>
        <el-form-item v-for="(form,i) in formList" :key="i" label="表名称：">
          <el-row style="display: flex" :gutter="10">
            <el-col :span="20">
              <el-input
                v-model="form.value"
                placeholder="请输入表名称"
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-button @click="deleteForm(i)">删除</el-button>
            </el-col>
          </el-row>

        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="handleClose"
          icon='el-icon-circle-close'
        >取 消</el-button>
        <el-button
          type="primary"
          icon='el-icon-circle-check'
          @click="doSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { mrpublicmeterrelate, EstateByPublicMeter, SaveMeter } from '@/api/market/meter/setting/privateSetting/person'
export default {
  name: 'publicAdd',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props:['meterType'],
  data () {
    // 这里存放数据
    return {
      formList:[{value:''}],
      title: '添加楼层电表',
      dialogVisible: false,
      ruleForm: {
        projectId: '',
        projectArea: '',
        meterWaterName: '',
        meterNames: []
      },
      rules: {
        projectId: [{ required: true, message: '请选择房屋', trigger: 'change' }],
        meterWaterName: [{ required: true, message: '请输入水表名称', trigger: 'blur' }],
        meterElecName: [{ required: true, message: '请输入电表名称', trigger: 'blur' }]
      },
      method: '',
      projectBuildingId: '',
      type: '',
      id: '',
      options: [],
      item: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    addForm(){
      this.formList.push({value:''})
    },
    deleteForm(i){
      this.formList.splice(i,1)
    },
    test (value) {
      value = value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')
      return value
    },
    doSubmit () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.method == 'add' || this.method == 'edit') {
            if (this.method == 'add') {
              this.ruleForm.privateMeterId = this.item.id
            } else {
              this.ruleForm.projectId = null
              this.ruleForm.id = this.id.id
            }
            // this.ruleForm.meterNames=this.formList.toString()
            let arr=[]
            this.formList.forEach(item=>{
              if(item.value===''){
                return
              }
              arr.push(item.value)
            })
            this.ruleForm.meterType=this.meterType
            this.ruleForm.meterNames=arr
            SaveMeter(this.ruleForm).then(res => {
              this.handleClose()
              if (this.method == 'add') {
                this.$message.success("添加成功")
              } else {
                this.$message.success("修改成功")
              }
              this.$emit("refreshList")
            })
          }
        } else {
          return false
        }
      })
    },
    handleClose () {
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields()
      }
      this.dialogVisible = false

    },
    init (method, id, item) {
      this.method = method
      this.id = id
      this.ruleForm = {
        projectId: '',
        projectArea: '',
        meterWaterName: '',
        meterElecName: ''
      }
      this.item = item
      if (method == 'add') {
        this.title = "新增"
      } else if (method == 'edit') {
        this.ruleForm.projectId = id.projectNumber
        this.ruleForm.meterWaterName = id.meterWaterName
        this.ruleForm.meterElecName = id.meterElecName
        this.title = "修改"
      }
      console.log(item)
      EstateByPublicMeter({ projectBuildingId: item.projectBuildingId, projectUnitId: item.projectUnitId }).then(res => {
        this.options = res.data.data
      })
      this.dialogVisible = true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    console.log(this.meterType)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
